<!--
@fucntion: 数据监控
-->
<template>
    <el-row>
      <el-card>
        <header style="background-color: #EBEEF5;margin : 2px; 
        height: 65px;padding-top: 12px;padding-bottom: 8px;padding-right: 8px;
        padding-left: 8px;position: absolute;z-index:999;">
        
                  <el-form  :model="QueryData" ref="QueryData" label-width="80px" :inline="true" size="mini" label-position="rigth">
                    <!-- 查询-检索-科室KS -->
                    <el-form-item label="科室" prop="K_CXLX_1" style="width: 8%;">
                      <el-select style="width: 100%;" v-model="QueryData.K_CXLX_1" placeholder="请选择">
                        <template v-for="(item,index) in CXData.CXLX1">
                          <el-option :key="index" :label="item" :value="item">
                            <span style="float: left">{{item}}</span>
                          </el-option>
                        </template>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="选择" prop="KS_XZ" style="width: 10%;" v-if="(QueryData.K_CXLX_1 == '选择科室' || QueryData.K_CXLX_1 == '')">
                      <el-select style="width: 100%;" v-model="QueryData.KS_XZ" placeholder="请选择" @change="open()">
                        <template v-for="(item,index) in CXData.K_CXLX_KS">
                          <el-option :key="index" :label="item.KS" :value="item.KS" :disabled="QueryData.K_CXLX_1 == ''" >
                            <span style="float: left">{{item.KS}}</span>
                          </el-option>
                        </template>
                      </el-select>
                    </el-form-item>
                    <el-form-item  label="名称" prop="KS_name" style="width:10%;" v-if="(QueryData.K_CXLX_1 == '名称查询')">
                      <el-input  v-model="QueryData.KS_name" @change="open()"></el-input>
                    </el-form-item>
                    <el-form-item label="ID" prop="KS_ID" style="width:10%;" v-if="(QueryData.K_CXLX_1 == 'ID查询')">
                      <el-input  v-model="QueryData.KS_ID" @change="open()"></el-input>
                    </el-form-item>
                    <!-- 查询-检索-监控设备JKSB -->
                    <el-form-item label="监控设备" prop="K_CXLX_2" style="width: 8%;">
                      <el-select style="width: 100%;" v-model="QueryData.K_CXLX_2" placeholder="请选择">
                        <template v-for="(item,index) in CXData.CXLX2">
                          <el-option :key="index" :label="item" :value="item">
                            <span style="float: left">{{item}}</span>
                          </el-option>
                        </template>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="选择" prop="JKSB_XZ" style="width: 10%;" v-if="(QueryData.K_CXLX_2 == '选择设备' || QueryData.K_CXLX_2 == '')">
                      <el-select style="width: 100%;" v-model="QueryData.JKSB_XZ" placeholder="请选择" @change="open()">
                        <template v-for="(item,index) in CXData.K_CXLX_JKSB">
                          <el-option :key="index" :label="item.JKSB" :value="item.JKSB" :disabled="QueryData.K_CXLX_2 == ''" >
                            <span style="float: left">{{item.JKSB}}</span>
                          </el-option>
                        </template>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="名称" prop="JKSB_name" style="width: 10%;" v-if="(QueryData.K_CXLX_2 == '名称查询')">
                      <el-input  v-model="QueryData.JKSB_name" @change="open()"></el-input>
                    </el-form-item>
                    <el-form-item label="ID" prop="JKSB_ID" style="width: 10%;" v-if="(QueryData.K_CXLX_2 == 'ID查询')">
                      <el-input  v-model="QueryData.JKSB_ID" @change="open()"></el-input>
                    </el-form-item>
                    <!-- 查询-检索-采集器CJQ -->
                    <el-form-item label="采集器" prop="K_CXLX_3" style="width:8%;">
                      <el-select style="width: 100%;" v-model="QueryData.K_CXLX_3" placeholder="请选择">
                        <template v-for="(item,index) in CXData.CXLX3">
                          <el-option :key="index" :label="item" :value="item">
                            <span style="float: left">{{item}}</span>
                          </el-option>
                        </template>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="选择" prop="CJQ_XZ" style="width: 10%;" v-if="(QueryData.K_CXLX_3 == '选择采集器' || QueryData.K_CXLX_3 == '')">
                      <el-select style="width: 100%;" v-model="QueryData.CJQ_XZ" placeholder="请选择" @change="open()">
                        <template v-for="(item,index) in CXData.K_CXLX_CJQ">
                          <el-option :key="index" :label="item.CJQ" :value="item.CJQ" :disabled="QueryData.K_CXLX_3 == ''" >
                            <span style="float: left">{{item.CJQ}}</span>
                          </el-option>
                        </template>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="名称" prop="CJQ_name" style="width: 10%;" v-if="(QueryData.K_CXLX_3 == '名称查询')">
                      <el-input  v-model="QueryData.CJQ_name" @change="open()"></el-input>
                    </el-form-item>
                    <el-form-item label="ID" prop="CJQ_ID" style="width: 10%;" v-if="(QueryData.K_CXLX_3 == 'ID查询')">
                      <el-input  v-model="QueryData.CJQ_ID" @change="open()"></el-input>
                    </el-form-item>
                  </el-form>
        </header>
        <el-card style="height: 85px;">
        </el-card>
        <!-- 卡片视图 -->
        <el-col :span="4" v-for="(carData, index) in tableData" :key="index" size="mini">
          <el-card :body-style="{ padding: '0px' }" style="margin : 4px;" >
            <div style="padding: 4px; background-color: #E4E7ED;margin : 1px; ">
                <div style="padding-top: 2px;padding-bottom: 12px;">
                  <span>{{carData.CJQMC}}</span>
                  <el-button icon="el-icon-share" type="primary" plain size="mini" style="float:right" 
                  @click="$router.push({path: '/TemperatureAndHumidity/Detailed', query:{ID : carData.CJQBH}})"></el-button> 
                </div>
                <el-row :gutter="24" style="background-color: #F2F6FC;margin-right: 4px;margin-left: 4px;">
                  <el-col :span="12" style="margin-top:10px">
                    <img style="width: 25px; height: 25px" :src="((carData.CJWDZ < carData.WDSXZ && carData.CJWDZ > carData.WDXXZ)?ur_WD_ZC:(((carData.CJWDZ < carData.WDXXZ)?ur_WD_D:ur_WD_G)))">
                    <div>
                      <span>{{carData.CJWDZ}}℃</span>
                    </div> 
                  </el-col>
                  <el-col :span="12" style="margin-top:10px">
                    <img style="width: 25px; height: 25px" :src="((carData.CJSDZ < carData.SDSXZ && carData.CJSDZ > carData.SDXXZ)?ur_SD_ZC:(((carData.CJSDZ < carData.SDXXZ)?ur_SD_D:ur_SD_G)))">
                    <div>
                      <span>{{carData.CJSDZ}}%RH</span>
                    </div>
                  </el-col>
                </el-row>
            </div>
          </el-card>
        </el-col>
      </el-card>
    </el-row>
</template>

<script>

export default {
  name: "Monitoring",
  methods: {

  },
  data() {
    return {
      tableData:'',//查询数据储存
      CXData:{
        CXLX1:["选择科室","名称查询","ID查询"],//查询方式
        CXLX2:["选择设备","名称查询","ID查询"],//查询方式
        CXLX3:["选择采集器","名称查询","ID查询"],//查询方式
        K_CXLX_KS:'',
        K_CXLX_JKSB:'',
        K_CXLX_CJQ:'',
        },
      QueryData:{//-----上部查询栏-----

          K_CXLX_1:'',//查询类型
          K_CXLX_2:'',//查询类型
          K_CXLX_3:'',//查询类型

          KS_XZ:'',
          KS_name:'',
          KS_ID:'',

          JKSB_XZ:'',
          JKSB_name:'',
          JKSB_ID:'',

          CJQ_XZ:'',
          CJQ_name:'',
          CJQ_ID:'',
      },

      ur_WD_G: '../../../static/img/WD_G.png',
      ur_WD_ZC: '../../../static/img/WD_ZC.png',
      ur_WD_D: '../../../static/img/WD_D.png',
      ur_SD_G: '../../../static/img/SD_G.png',
      ur_SD_ZC: '../../../static/img/SD_ZC.png',
      ur_SD_D: '../../../static/img/SD_D.png',
    };
  },
  methods: {
    open() {//监听头部检索的改变
        //this.$message('查一次');
        this.onSearching();
      },
    onSearching: function() {//查询
      var me = this;
      let url = "/static/data/Monitoring.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url, this. QueryData).then(resp => {
            if(resp.status == 200) {
              this.tableData = resp.data.data;
            }
        });
      }
    },
    onDetails: function(){
      
    }
  },
  created: function() {
    var me = this;

    this.onSearching();

    // 获取检索选择下拉信息
    me.getRequest("/static/data/WGdata1.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.CXData.K_CXLX_KS = resp.data.data;
      }
    });
    me.getRequest("/static/data/WGdata2.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.CXData.K_CXLX_JKSB = resp.data.data;
      }
    });
    me.getRequest("/static/data/WGdata3.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.CXData.K_CXLX_CJQ = resp.data.data;
      }
    });

  }
};
</script>

<style lang="scss">
</style>